<template>
  <div>
    <header>&lt;</header>
    <div class="detail">
      <img :src="detail.pic" alt="">
      <div>
        <p>￥{{detail.price}}</p>
        <button @click="goCart">加入购物车</button>
      </div>
    </div>
 </div>
</template>

<script>
export default {
  name: '',
  data() { 
    return {
      detail: {}
    }
  },
  created() {
    this.detail = JSON.parse(this.$route.query.item)
    // this.detail = this.$route.query.item
  },
  methods:{
    goCart() {
      this.$router.push('/cart')
    }
  },
 }
</script>

<style scoped lang="scss">
header {
  height: 40px;
  padding: 0 20px;
  line-height: 40px;
  background-color: #ccc;
  color: blue;
}
.detail {
  display: flex;
  padding: 20px;
  p{
    color: #e23033;
  }
  img {
    width: 100px;
    height: auto;
    margin-right: 20px;
  }
  button {
    background-color: #eee;
    padding: 6px 50px;
    outline: none;
    border: none;
  }
}
</style>